<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Socket.IO 的使用</h1>

    <p id="p">count:</p>

    <button id="btn1">建立链接</button>

    <button id="btn2">发消息</button>

    <button id="btn3">incre</button>
    <button id="btn4">decre</button>

    <!-- 引入 socket.io 的核心类库 得到一个 io 对象 -->
    <script src="./socket.io.js"></script>
    <!-- 自己的逻辑 -->
    <script>
      // socket 实例对象
      let socket = null;

      btn1.onclick = function () {
        // url 地址不是 ws 或 wss
        //    而是采用 http 或 https
        socket = io("http://127.0.0.1:3000");

        // 监听 show 事件
        socket.on("show", (payload) => {
          p.innerHTML = `count: ${payload}`;
        });

        // 监听 socket 事件
        socket.on("abcd", (payload) => {
          console.log("服务端来消息了", payload);
        });
      };

      btn2.onclick = function () {
        if (!socket) return;

        // 向服务端发消息
        //    socket.io 是基于事件系统
        //    socket.emit(eventName, payload)
        socket.emit("abcd", "我是老刘");
      };

      btn3.onclick = function () {
        if (!socket) return;

        socket.emit("incre");
      };

      btn4.onclick = function () {
        if (!socket) return;

        socket.emit("decre");
      };
    </script>
  </body>
</html>
